<template>
  <div>
    <p></p>
   <van-button icon="http://rul4y8e5f.hn-bkt.clouddn.com/playlist1.png" round  @click="collectList2PlayList()">添加到播放列表</van-button>
   <!-- <van-button  type="info" round size="small" >清空收藏夹</van-button> -->
   <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <page2CollectmusicList 
        v-for="item in list"
         :key="item.musicId"
         :Id="item.musicId"
         :ItCollectId="item.collectId"
         :ItMusicId="item.musicId"
         :MusicName="item.musicName"
         :MusicAuthor="item.musicAuthor"
         :MusicIcon="item.musicIcon"
         :MusicUrl="item.musicUrl"
         ></page2CollectmusicList>
  
    </van-list>
  
  </div>
</template>

<script>
import CollectAPI from '@/api/CollectAPI.js';

import page2CollectmusicList from './page2CollectmusicList.vue';
import PlayListAPI from '@/api/PlayListAPI';

export default {
  name: "CollectMusicList",
  components: { page2CollectmusicList },

  data() {
    return {
      list: [],
            loading: false,
           finished: true,
    }
  },

  created() {
    this.getCollectMsicuList();
  },
  methods: {
    collectList2PlayList(){
      // Collect2playlist
   
      var result =  PlayListAPI.Collect2playlist(this.ItCollectId)
      // 获取返回结果
      result.then((val)=>{
   
        if(val.success){
          this.$toast("添加成功！！")
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })

    },

    getCollectMsicuList(){
      var result = CollectAPI.GetMyCollectMsicuListById(this.ItCollectId)
      // 获取返回结果
      result.then((val)=>{
   
        if(val.success){
          // console.log("查询成功！！！")
      // 将数据存到list里面
          this.list=val.data
          console.log(this.list)
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })

    }
  },

  props:{
    ItCollectId: {
      required: true,
      type: String
    },
  }

}
</script>

<style>

</style>